<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //div淡入淡出的练习

        window.onload = function () {
            let timer = null;
            let initValue = 0.3;    //初始的可见度
            let targetValue;        //需要修改为的目标可见度


            //先获取idv
            let oDiv = document.getElementById('div1');

            //当鼠标移入时
            oDiv.onmouseenter = function () {
                clearInterval(timer);   //先终止定时器(重要,否则会闪烁)
                targetValue = 1;        //设置最终可见度为1
                changeOpacity(initValue,targetValue,oDiv);      //开始执行渐变效果
                initValue = targetValue;    //执行完后刷新当前可见度
            };

            //当鼠标移出时
            oDiv.onmouseleave =function () {
                clearInterval(timer);
                targetValue = 0.3;
                changeOpacity(initValue,targetValue,oDiv);
                initValue = targetValue;

            };

            //修改可见度
            function changeOpacity(initValue,targetValue,oDiv,speed = 0.05,rate = 30) {

                //判断,如果初始值比目标值大,那么他是变淡,所以速度为负
                if (initValue > targetValue) speed = -speed;

                //执行具体的定时器
                timer = setInterval(function () {
                    if (compare(initValue,targetValue)) {
                        initValue += speed;
                        oDiv.style.opacity = initValue;
                        console.log('do change');
                    }else {
                        clearInterval(timer);
                        console.log('do clear');
                    }
                },rate);

                //判断是变淡还是变深(通过speed)
                function compare(initValue, targetValue) {
                    if (speed > 0) {
                        //变深
                        if (initValue < targetValue) return true
                    }else {
                        //变淡
                        if (initValue > targetValue) return true;
                    }
                    return false;
                }
                //备注,如果不使用compare也可以,因此需要设定终止定时器的条件为init==target
                //但当speed的值在变化中不会使init与target相等时
                //比如init=0.1,speed=0.03,最终无法与target相等
                //此种方法不是很好,因此保留compare来进行比较是否完成了定时器
            }

            //错误点:不清楚js中外部变量是否会被内部的函数修改
        }


    </script>

    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: burlywood;
            /*filter: alpha(opacity:30);      !*给ie的*!*/
            opacity: 0.3;                   /*给chrome和ff的*/
        }

        #div2 {
            width: 200px;
            height: 200px;
            background: burlywood;
        }
    </style>
</head>

<body>

<div id="div1">

</div>
<div id="div2">对比</div>

</body>
</html>